<!-- 
  完成折线图图的开发

  @since 1.0.0
  （1）完成使用固定数据进行操作
 -->
<template>
  <div id="XionganPlot" ref="XionganPlot"></div>
</template>
  
<script>
import { http } from "@/utils/requests";
import { PlotEcharts } from '@/utils/echartsUtils';

export default {
  name: "XionganPlot",
  data() {
    return {
      chartIns: null
    }
  },
  props: {
    country: {
      type: String,
      default: "安新县"
    }
  },
  mounted() {
    // 找到挂在的元素，并获取
    const ele = document.getElementById("XionganPlot");
    // 实例化chartsIns对象
    this.chartIns = new PlotEcharts(ele);
    // 发送网络请求，并渲染图片
    this.httpRequest({});
    // 测试代码
    // this.chartIns.updateCharts({
    //   title: "折线图",
    //   boundaryGap: false,
    //   country: 'Brazil',
    //   year: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    //   countryData: [820, 932, 901, 934, 1290, 1330, 1320],
    // });
  },
  methods: {
    /**
     * http请求
     * @param {Object} params 传入的查询参数
     */
    httpRequest(params) {
      // http异步请求
      http.getRequest("/api/yearCountryNpp/querybycountry?country=" + this.$props.country, params).then(res => {
        this.chartIns.updateCharts(res);
      }, err => {
        console.log(err);
      });
    }
  }
}
</script>
  
<style scoped>
#XionganPlot {
  /* TODO 需要完成对height的修改 */
  height: 300px;
  width: 450px;
  margin: 25px;
}
</style>